<template>
  <div class="login flex column align-center justify-center">
    <div class="login-container flex column align-center">
      <div class="title-wrap">
        <img src="@/assets/imgs/login/title-img.png" alt="" />
      </div>
      <div class="login-form">
        <a-form :form="form" layout="inline" autocomplete="off" @submit="handleSubmit">
          <a-form-item>
            <a-input
              :maxLength="10"
              placeholder="请输入账号"
              v-decorator.trim="[
                'username',
                {
                  rules: [{ required: true, message: '请输入账号!' }],
                },
              ]"
            >
              <a-icon slot="prefix" type="user" style="color: #009ac0" />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input
              type="password"
              :maxLength="16"
              placeholder="请输入密码"
              @paste.native.capture.prevent="handlePaste"
              v-decorator.trim="[
                'password',
                {
                  rules: [{ required: true, message: '请输入密码!' }],
                },
              ]"
            >
              <a-icon slot="prefix" type="lock" style="color: #009ac0" />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-row style="height: 100%">
              <a-col :span="17" style="height: 100%">
                <a-input
                  :maxLength="4"
                  placeholder="请输入验证码"
                  v-decorator.trim="[
                    'captcha',
                    {
                      rules: [
                        { required: true, message: '请输入验证码!' },
                        { pattern: /^[0-9A-Za-z]{4}$/, message: '请输入验证码!' },
                      ],
                    },
                  ]"
                  @keyup.enter.native="handleSubmit"
                />
              </a-col>
              <a-col :span="6" style="height: 100%">
                <img @click="getRandomImage" style="width: 100%; margin-top: 2px" :src="imgurl" alt="" />
              </a-col>
            </a-row>
          </a-form-item>
        </a-form>
        <a-button
          type="primary"
          class="login-button"
          :loading="loginBtn"
          @click.stop.prevent="handleSubmit"
          :disabled="loginBtn"
        >
          登 录
        </a-button>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { timeFix } from '@/utils/util'
import { mapActions } from 'vuex'
import { randomImage, checkCaptcha } from '@/api/api'
import { commitTrim } from '@/utils/util'
export default {
  name: 'login',
  data() {
    return {
      loginBtn: false,
      form: this.$form.createForm(this),
      imgurl: '',
      checkKey: '',
    }
  },
  created() {
    Vue.ls.remove(ACCESS_TOKEN)
    this.getRandomImage()
  },
  methods: {
    ...mapActions(['Login']),

    //登录
    handleSubmit() {
      this.loginBtn = true
      // 使用账户密码登录
      this.form.validateFields((err, values) => {
        if (!err) {
          checkCaptcha({ checkKey: this.checkKey, captcha: values.captcha })
            .then(() => {
              commitTrim(values)
              if (values.username == '') {
                this.$message.error('账号不能为空')
                this.loginBtn = false
                return
              }
              if (values.password == '') {
                this.$message.error('密码不能为空')
                this.loginBtn = false
                return
              }
              this.Login(values)
                .then((res) => {
                  //登录成功
                  this.$router.push({ path: '/dashboard/analysis' }).catch(() => {
                    let temp = 100
                    this.timeID = setInterval(async () => {
                      temp = temp + temp
                      await this.$router.push({ path: this.$store.state.user.permissionList[0].path })
                    }, temp)
                  })
                  this.$notification.success({
                    message: '欢迎',
                    description: `${timeFix()}，欢迎回来`,
                  })
                })
                .catch((err) => {
                  //登录后台失败
                  // let description =
                  //   ((err.response || {}).data || {}).message || err.message || '请求出现错误，请稍后再试'
                  // this.$notification['error']({
                  //   message: '登录失败',
                  //   description: description,
                  //   duration: 4,
                  // })
                  this.loginBtn = false
                })
            })
            .catch((res) => {
              this.loginBtn = false
              this.getRandomImage()
            })
        } else {
          // 校验失败
          this.loginBtn = false
        }
      })
    },
    handlePaste() {
      this.form.setFieldsValue({ password: '' })
    },
    getRandomImage() {
      randomImage().then((res) => {
        this.checkKey = res.result.checkKey
        this.imgurl = res.result.result
      })
    },
  },
  destroyed() {
    clearInterval(this.timeID)
  },
}
</script>
<style lang="less">
.login {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: url('~@/assets/imgs/login/bg.png') no-repeat center;
  background-size: 100% 100%;
  .login-container {
    width: 670px;
  }
  .login-form {
    margin-top: 70px;
    padding: 110px 160px 214px 150px;
    background: url('~@/assets/imgs/login/login-form.png') no-repeat center;
    background-size: 100% 100%;
    .ant-form-item {
      margin-bottom: 0.3rem;
    }
    .ant-form-item,
    .ant-form-item-control-wrapper,
    .ant-form-item-control {
      width: 100%;
      height: 0.48rem;
    }
    .ant-form-item-children {
      width: 100%;
      height: 0.48rem;
      display: block;
      background: url('~@/assets/imgs/login/inputbg.png') no-repeat center;
      background-size: 100% 100%;
      .ant-input-affix-wrapper {
        height: 100%;
      }
      input {
        height: 100%;
        outline: none;
        border: none;
        background: transparent;
        color: #00f8ff;
        &:-internal-autofill-previewed,
        &:-internal-autofill-selected {
          -webkit-text-fill-color: #00f8ff !important;
          transition: background-color 5000s ease-in-out 0s !important;
        }
      }
      ::placeholder {
        color: #009ac0;
      }
    }
  }
  button.login-button,
  .ant-btn-primary[disabled] {
    width: 100%;
    height: 54px;
    background: #00f8ff;
    border-radius: 8px;
    border: 1px solid #00f8ff;
    color: #012e30;
    font-size: 20px;
    font-weight: 500;
  }
  .ant-input:hover,
  .ant-input:focus {
    background: transparent !important;
  }
}
.valid-error .ant-select-selection__placeholder {
  color: #f5222d;
}
</style>
